<template>
  <div class="text" :style="computedStyle">
    {{ componentData.text ? componentData.text : '文本内容'}}
  </div>
</template>

<script>

const defaultComponentData = {
  text: '',
  fontSize: 12,
  fontColor: '#000000',
  backgroundColor: '#ffffff',
  textAlign: 'left',
  padding: null,
  margin: null,
  paddingBottom: null,
  paddingLeft: null,
  paddingRight: null,
  paddingTop: null,
  marginBottom: null,
  marginLeft: null,
  marginRight: null,
  marginTop: null,
  sizeUnit: 'px'
}

export default {
  name: 'LpText',
  title: '文本',
  image: require('./images/text.png'),
  registerName: 'lp-text',
  defaultComponentData: defaultComponentData,
  props: {
    componentData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {

    }
  },
  computed: {
    computedStyle() {
      const componentData = Object.assign(defaultComponentData, this.componentData)
      const style = {}
      this.addProperty(style, 'font-size', componentData.fontSize, componentData.sizeUnit)
      this.addProperty(style, 'color', componentData.fontColor)
      this.addProperty(style, 'background-color', componentData.backgroundColor)
      this.addProperty(style, 'text-align', componentData.textAlign)
      this.addProperty(style, 'padding', componentData.padding)
      this.addProperty(style, 'margin', componentData.margin)
      this.addProperty(style, 'padding-bottom', componentData.paddingBottom, componentData.sizeUnit)
      this.addProperty(style, 'padding-left', componentData.paddingLeft, componentData.sizeUnit)
      this.addProperty(style, 'padding-right', componentData.paddingRight, componentData.sizeUnit)
      this.addProperty(style, 'padding-top', componentData.paddingTop, componentData.sizeUnit)
      this.addProperty(style, 'margin-bottom', componentData.marginBottom, componentData.sizeUnit)
      this.addProperty(style, 'margin-left', componentData.marginLeft, componentData.sizeUnit)
      this.addProperty(style, 'margin-right', componentData.marginRight, componentData.sizeUnit)
      this.addProperty(style, 'margin-top', componentData.marginTop, componentData.sizeUnit)
      return style
    }
  },
  methods: {

  }
}
</script>
<style scoped>
.text {
  width: 100%;
  height: 80px;
}
</style>
